<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->

<template>
  <el-dialog v-model="props.importVisible" title="更新图片" width="500px" destroy-on-close @close="cancel">
    <div class="import_div">
      <el-form size="small" label-width="150px" v-loading="uploadLoading">
        <el-form-item label="">
          <div>
            <div style="display: flex; align-items: center">
              <el-upload
                @change="handleChange"
                :on-remove="handleRemove"
                :file-list="fileList"
                list-type="picture-card"
                :show-file-list="true"
                :on-exceed="handleExceed" 
                :auto-upload="false"
                :multiple="false"
                :limit="1"
                action="#"
                accept=".png,.jpg,.jpeg,.bmp,.gif,.webp"
              >
                <!-- <el-button size="small" type="primary">选取文件</el-button> -->
                <el-icon v-if="fileList.length === 0"><Plus /></el-icon>
              </el-upload>
            </div>
            <!-- <div class="el-upload__tip">请选择要上传的文件，格式为xls,xlsx</div> -->
          </div>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" type="primary" @click="submit">确 定</el-button>
        <el-button size="small" @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { importPicture } from '@/api/material';
const props = defineProps(['importVisible', 'objectId', 'fieldPath', 'indexArr', 'tableName']);
const emits = defineEmits(['handleEvent']);
const fileList = ref([]);
const submitFile = ref(null);
const validate = ref(false);
const uploadLoading = ref(false);
const cancel = () => {
  emits('handleEvent', { type: 'cancel' });
};
const handleRemove = (file) => {
  submitFile.value = null;
};
const handleChange = (file) => {
  const fileType = file.name.split('.');
  // if (!(fileType[1] === 'xls' || fileType[1] === 'xlsx')) {
  //   ElMessage({ showClose: true, message: '文件类型错误', type: 'error' });
  //   return;
  // }
  validate.value = true;
  submitFile.value = file.raw;
};

const handleExceed = () => {
  ElMessage({ showClose: true, message: '最多只能上传 1 张图片！', type: 'error' });
}

const submit = () => {
  uploadLoading.value = true;
  const formData = new FormData();
  formData.append('file', submitFile.value);
  // formData.append('objectId', props.objectId);
  // formData.append('fieldPath', props.fieldPath);
  formData.append('tableName', props.tableName);
  importPicture(formData).then((res) => {
    if (res) {
      console.log('uploading  success ', res)
      uploadLoading.value = false;
      emits('handleEvent', { type: 'submit', path: res.msg, index: props.indexArr });
      ElMessage({ showClose: true, message: '图片更新成功', type: 'success' });
    }
  }).catch(() => {  
    uploadLoading.value = false;
  }).finally(() => {
    uploadLoading.value = false;
  })
};
</script>
  <style lang="scss" scoped>
.import_div {
  // display: flex;
  align-items: center;
  .error {
    margin-top: 10px;
  }
}
</style>